<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>五子棋游戏</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <header>
            <h1>五子棋</h1>
        </header>
        
        <div class="game-info">
            <div class="player-info">
                <div class="player black active">
                    <div class="piece black"></div>
                    <span>黑方</span>
                </div>
                <div class="player white">
                    <div class="piece white"></div>
                    <span>白方</span>
                </div>
            </div>
            
            <div class="status">轮到黑方落子</div>
        </div>
        
        <div class="board-container">
            <canvas id="board" width="600" height="600"></canvas>
        </div>
        
        <div class="controls">
            <button id="restart">重新开始</button>
            <button id="undo">悔棋</button>
        </div>
        
        <div class="game-rules">
            <h2>游戏规则</h2>
            <p>1. 黑方先行，双方轮流在棋盘上落子</p>
            <p>2. 先在横、竖或斜方向上形成连续五子的一方获胜</p>
            <p>3. 可以使用悔棋按钮撤销上一步操作</p>
        </div>
    </div>
    
    <div id="win-modal" class="modal">
        <div class="modal-content">
            <h2 id="win-message"></h2>
            <button id="new-game">开始新游戏</button>
        </div>
    </div>
    
    <script src="script.js"></script>
</body>
</html>